<%@ include file="/common/taglibs.jsp"%>
<head>
	<title><spring:message code="paymentNotice.header"/></title>
</head>
<div class="ui-widget summary-booklist">
	<h1 class="ui-helper-reset ui-widget-header ui-corner-top booklist-header">
		<spring:message code="paymentNotice.header"/>
	</h1>
	<div class="ui-widget-content ui-corner-bottom" style="text-align: center;">
		<form:form commandName="creditCardDto" method="post" action="checkAndFillCreditCard.html">
		<table>
			<tr>
				<td colspan="2"><form:hidden path="previousPath"/>
					<form:errors path="previousPath" cssClass="fieldError"/></td>
			</tr>
			<tr>
				<td colspan="2"><h2 style="color:red;">This is a prototype page, just simply update data to DB.</h2></td>
			</tr>
			<tr>
				<th><spring:message code="payByCreditCard.payAmount"/>:</th>
				<td style="text-align: left; padding-left: 10px;"><c:out value="${order.price}"/></td>
			</tr>
			<tr>
				<th><spring:message code="payByCreditCard.payerName"/></th>
				<td style="text-align: left; padding-left: 10px;"><form:input path="payerName"/><form:errors path="payerName" cssClass="fieldError"/></td>
			</tr>
			<tr>
				<th><spring:message code="payByCreditCard.creditCardType"/></th>
				<td style="text-align: left; padding-left: 10px;"><form:select path="creditCardType">
						<form:option value="VISA">VISA</form:option>
						<form:option value="MASTER_CARD">MASTER CARD</form:option>
						<form:option value="JCB">JCB</form:option>
					</form:select><form:errors path="creditCardType" cssClass="fieldError"/></td>
			</tr>
			<tr>
				<th><spring:message code="payByCreditCard.creditCardNumber"/></th>
				<td style="text-align: left; padding-left: 10px;"><form:input path="creditCardNumber1" maxlength="4"/>-
					<form:input path="creditCardNumber2" maxlength="4"/>-
					<form:input path="creditCardNumber3" maxlength="4"/>-
					<form:input path="creditCardNumber4" maxlength="4"/>
					<form:errors path="creditCardNumber1" cssClass="fieldError"/>
					<form:errors path="creditCardNumber2" cssClass="fieldError"/>
					<form:errors path="creditCardNumber3" cssClass="fieldError"/>
					<form:errors path="creditCardNumber4" cssClass="fieldError"/>
					</td>
			</tr>
			<tr>
				<th><spring:message code="payByCreditCard.validMonthYear"/></th>
				<td style="text-align: left; padding-left: 10px;"><form:input path="validMonth" maxlength="2"/>/<form:input path="validYear" maxlength="2"/>
					<form:errors path="validMonth" cssClass="fieldError"/>
					<form:errors path="validYear" cssClass="fieldError"/></td>
			</tr>
			<tr>
				<th><spring:message code="payByCreditCard.securityCode"/></th>
				<td style="text-align: left; padding-left: 10px;"><form:input path="securityCode" maxlength="3"/>
					<form:errors path="securityCode" cssClass="fieldError"/></td>
			</tr>
			<tr>
				<td colspan="2"><button id="payCreditCard" class="aButton"><spring:message code="payByCreditCard.pay"/></button></td>
			</tr>
		</table>
		</form:form>
	</div>
</div>